<template>
	<!--
		前端系统的Vue应用入口，所有东西从这个Vue文件延伸出去
	-->
	<sub-header>
		<div class="container m-auto">
			<div class="px-4 inblock text-gray-100 select-none text-lg leading-10">LOL语音差异</div>
			<!-- <div v-for="modl of modules" class="Tab inblock" :class="{ _now: moduleNow == modl.slot }" @click="modulePre = modl.slot">{{modl.name}}</div> -->
		</div>
	</sub-header>
	<component :is="moduleNow" />
</template>

<script setup>
	import { ref, watch, onBeforeMount, } from 'vue';
	import B from './lib/Bus.js';
	import { $alert } from './lib/plugin/alert/index.js';


	const loadComp = async slot => {
		if(B.app.component(slot)) { return; }

		try {
			try {
				B.app.component(slot, (await import(`./module/${slot.replace(/-/g, '/')}.vue`)).default);
			}
			catch(error) {
				B.app.component(slot, (await import(`./module/${slot.replace(/-/g, '/')}/index.vue`)).default);
			}
		}
		catch(error) {
			$alert(`加载[${slot}]模块 失败 `, error.message || error);

			throw error;
		}
	};


	const moduleNow = ref(null);
	const modulePre = ref('');

	onBeforeMount(async () => modulePre.value = 'Home');

	watch(modulePre, now => loadComp(now).then(() => moduleNow.value = now));
</script>

<style lang="sass" scoped>
sub-header
	@apply w-full px-2 fixed top-0 left-0 bg-gray-900 z-50
	height: var(--heightTopbar)
	line-height: var(--heightTopbar)

	& .Tab
		@apply px-2 cursor-pointer text-gray-100 hover:text-green-300

	& .Tab._now
		@apply font-bold text-green-500

module
	margin-top: var(--heightTopbar)
	@apply block relative w-full

	&[height-full]
		height: calc(100vh - var(--heightTopbar))
</style>


<style lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
	@variants responsive {
		.inblock {
			@apply inline-block align-top;
		}
		.nosel {
			@apply select-none;
		}
		.sel {
			@apply select-text;
		}
		.elli {
			@apply overflow-hidden whitespace-nowrap overflow-ellipsis;
		}

		.line-8 {
			@apply h-8 leading-8;
		}
	}
}
</style>


<style lang="sass">
:root
	--scrollbarWidth: 0.75rem
	--heightTopbar: 2.5rem

html
	@apply h-full overflow-x-hidden overflow-y-auto text-gray-900

input
	@apply text-gray-900

/* Scrollbar Style */
*
	scrollbar-width: thin
	scrollbar-color: rgba(119, 119, 119, 0.4)

::-webkit-scrollbar
	width: var(--scrollbarWidth)
	height: var(--scrollbarWidth)

::-webkit-scrollbar-track:hover
	background-color: rgba(119, 119, 119, 0.2)

::-webkit-scrollbar-thumb
	border-radius: var(--scrollbarWidth)
	background: rgba(119, 119, 119, 0.4)

::-webkit-scrollbar-thumb:hover
	background: rgba(119, 119, 119, 0.7)

::-webkit-scrollbar-thumb:active
	background: rgba(119, 119, 119, 1)

::-webkit-scrollbar-corner
	background-color: transparent


.transAll, .transAll *, .trans
	transition-property: all
	transition-duration: 0.4s

	-webkit-transform: translateZ(0)
	-moz-transform: translateZ(0)
	-ms-transform: translateZ(0)
	-o-transform: translateZ(0)
	transform: translateZ(0)

	&._d02
		transition-duration: 0.2s
	&._d07
		transition-duration: 0.7s
	&._d2
		transition-duration: 2s
</style>